<template>
    <view class="content">
        <view class="rel" style="overflow: hidden;">
            <image class="m-bg-img" mode="aspectFit" src="../../static/img/icon_search_bg.jpg"></image>
            <image class="m-logo-img" mode="aspectFit" src="../../static/img/icon_logo.png"></image>
            <view class="top-wrap abs wd100 pad-top-l">
                <view class="tab-wrap col-fff flexBox space-evenly">
                    <view @click="searchType = 'card'" :class="(!searchType || searchType === 'card') && 'tab-active'">查卡</view>
                    <view @click="searchType = 'business'" :class="searchType === 'business' && 'tab-active'">查商家</view>
                </view>
                <view class="search-wrap flexCenter">
                    <view v-if="searchType === 'card'" class="flex1">
                        <view class="input-wrap bg-fff">
                            <input class="m-input" :value="cardName" placeholder="请输入卡名" @blur="inputBlurCardName" />
                        </view>
                    </view>
                    <view v-if="searchType === 'card'" class="flex1 pad-left-ss">
                        <view class="input-wrap bg-fff">
                            <input class="m-input" type="number" :value="cardId" placeholder="请输入卡号" @blur="inputBlurCardId" />
                        </view>
                    </view>
                    <view v-if="searchType !== 'card'" class="flex1">
                        <view class="input-wrap bg-fff">
                            <input class="m-input" :value="businessName" placeholder="请输入发卡公司" @blur="inputBlurBusinessName" />
                        </view>
                    </view>
                    <view class="search-btn bg-fff col-000" @click="search">查询</view>
                </view>
                <view class="hot-search col-fff pad-hov-mm mar-top-m">
                    <view class="m-text inb-top txt-center">热搜</view>
                    <view class="hot-item-wrap inb-top pad-hov-s flexBox space-evenly">
                        <view class="hote-item inb mar-bot-ss ellipsis" v-for="(hotSearchList, index) of hotSearchList"
                            :key="index">{{ hotSearchList.title + "" + index }}</view>
                    </view>
                </view>
            </view>
        </view>
        <news-tab></news-tab>
    </view>
</template>

<script>
    import newsTab from '../../components/newsTab.vue';
    export default {
        components: {
            newsTab
        },
        computed: {
            cmpTitle() {
                return this.title + "cmp";
            }
        },
        data() {
            return {
                title: 'Hello',
                searchType: 'card',
                cardName: '',
                cardId: '',
                businessName: '',
                hotSearchList: [{
                        title: "杭州市单用途商业预付卡协会成立 预付消费市场难题找到破解之法"
                    },
                    {
                        title: "特别发布！康存数科/中国联通/享安经纪三家联手，共同打造数字"
                    },
                    {
                        title: "信用消费时代•共享预付红利”资源对接会召开 助力企业异构联接"
                    },
                    {
                        title: "宁波市商务委联合多部门开展第四次单用途商业预付卡现场执法检查"
                    },
                    {
                        title: "康享三宝，首单顺利出炉！ “商业新形态，经纪新模式，市场新"
                    },
                    {
                        title: "宁波市商务委组织的单用途商业预付卡专题培训会在慈溪圆满落幕"
                    },
                    {
                        title: "保险让预付卡用户更安心"
                    },
                    {
                        title: "市单用途商业预付卡多部门联合执法检查组走进北仑、江北区"
                    },
                    {
                        title: "上海市单用途预付卡协会召开换届大会，康存网络科技当选副会长单"
                    },
                    {
                        title: "重磅！享安在线保险经纪公司与康存数科集团达成全面战略合作关系"
                    }
                ],
            }
        },
        onLoad() {},
        methods: {
            search() {
                console.log(this.cardName, this.cardId, this.businessName);
                uni.showLoading({
                    title: '查询中'
                });
                setTimeout(() => {
                    let url = "../../pages/searchResult/searchResult?type=".concat((Math.random() > 0.5) ? 'success' : 'empty');
                    uni.hideLoading();
                    uni.navigateTo({
                        url: url
                    });    
                }, 2000)
            },
            inputBlurCardName({
                detail
            }) {
                this.cardName = detail.value;
            },
            inputBlurCardId({
                detail
            }) {
                this.cardId = detail.value;
            },
            inputBlurBusinessName({
                detail
            }) {
                this.businessName = detail.value;
            }
        }
    }
</script>

<style>
    .content {
        background-color: #f3f4f5;
    }

    .m-bg-img {
        width: 100%;
        height: 96.1vw;
    }

    .m-logo-img {
        position: absolute;
        width: 60%;
        height: 11.2442vw;
        top: 30px;
        left: 20%;
    }

    .m-input {
        height: 52.5upx;
    }

    .top-wrap {
        top: 145upx;
    }

    .tab-wrap {
        font-size: 15px;
        padding: 10px 15px 20px;
    }

    .tab-wrap view {
        padding-bottom: 4px;
    }

    .tab-active {
        border-bottom: 1px solid rgb(255, 255, 255);
    }

    .search-wrap {
        text-align: left;
        padding: 0px 15px;
        font-size: 26upx;
        overflow: visible;
    }

    .search-btn {
        padding: 25upx 35upx;
        margin-left: 10px;
    }

    .input-wrap {
        padding: 14upx 18upx;
        opacity: 0.85;
        overflow: visible;
    }

    .hot-search {
        font-size: 13px;
    }

    .hot-search .m-text {
        border-right: 1px solid #FFFFFF;
        width: 50px;
    }

    .hot-item-wrap {
        width: calc(100% - 71px);
    }

    .hote-item {
        width: 46%;
    }

    .hote-item:nth-child(2n-1) {
        padding-right: 8%;
    }
</style>
